Function: setKeyboardA11Y(domElementOrCSSSelector, stringRole, stringName, boolNoSpacebar, fnOptionalClickHandler)

Shorthand: setKBA11Y(domElementOrCSSSelector, stringRole, stringName, boolNoSpacebar, fnOptionalClickHandler)

Description: Will automatically add keyboard and screen reader accessible attributes and events to non-focusable simulated active elements that are not already accessible.

Returns: domElement or array of domElements if applicable, or $A object if chained.

Note: If this function is run on native active elements such as buttons or links, native form fields, or elements that are already keyboard accessible, it will do nothing. The purpose of this function is to add keyboard and screen reader accessibility where presently there is none.

Example:

// Add keyboard and screen reader accessibility to the following clickable icon from Font Awesome:
// <i class="fasfa-coffee fa-xs"></i>

$A.setKeyboardA11Y("i.fasfa-coffee.fa-xs", "button", "Show me how to make a cup of coffee!");

// Or the same by shortening the parameters list when the element already has a name.
// E.G. For <span class="button">Settings</span>

$A.setKeyboardA11Y("span.button", "button", function(ev) {
  alert("Do something when clicked!");
});

// Or the same using chaining

var myChain = $A("i.fasfa-coffee.fa-xs").setKeyboardA11Y("button", "Show me how to make a cup of coffee!");

// Or the same by shortening the parameters list when the element already has a name.
// E.G. For <span class="button">Settings</span>

var myChain = $A("span.button").setKeyboardA11Y("button", function(ev) {
  alert("Do something when clicked!");
});

// To return the modified object within a chain, use the "return()" method.

var myObject = myChain.return();